import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Button, Tooltip } from 'antd'
import Drawer from 'COMPONENT/painter/drawer.js'
// import './example.less'

class App extends Component {
  constructor(props) {
    super(props)
    this.displayName = 'App'
    this.state = {
      btnSelect: 0
    }
  }
  componentDidMount() {
    var { source } = this.props
    var canvas = ReactDOM.findDOMNode(this.refs.canvas)
    var img = new Image()
    img.src = source
    img.onload = ()=>{
      this.drawer = new Drawer({background: img}).insertInto(canvas)
      this.mask = this.drawer.newMask()
      this.drawer.setPen(this.mask)
      this.drawer.addEventListener('update', (data)=>{
        this.setState({})
        this.props.onPaint(this.drawer.toDataURL())
        this.props.onCut(data)
      })
    }
  }
  render() {
    var { btnSelect } = this.state
    return <div className="tederen-example">
      <div ref="canvas">
        {this.drawer ? <div className="tools" style={{marginBottom: 20}}>
          <Tooltip title="切图">
            <Button className={btnSelect == 0 ? 'active' : ''} onClick={()=>this.setState({btnSelect: 1})}>
              切图
            </Button>
          </Tooltip>
          <Tooltip>
            <Button className={btnSelect == 1 ? 'active ' : ''} onClick={()=>(this.setState({btnSelect: 1}), this.drawer.setPen('linePen'))}>
              画线
            </Button>
          </Tooltip>
          <Tooltip>
            <Button className={btnSelect == 2 ? 'active ' : ''} onClick={()=>(this.setState({btnSelect: 2}), this.drawer.setPen('ellipsePen'))}>
              画矩形
            </Button>
          </Tooltip>
          <Tooltip>
            <Button className={btnSelect == 3 ? 'active ' : ''} onClick={()=>(this.setState({btnSelect: 3}), this.drawer.setPen())}>
              画3
            </Button>
          </Tooltip>
          <Tooltip>
            <Button className={btnSelect == 4 ? 'active ' : ''} onClick={()=>(this.setState({btnSelect: 4}), this.drawer.setPen('textPen'))}>
              文本框
            </Button>
          </Tooltip>
          <Tooltip title="撤销">
            <Button onClick={()=>{this.drawer.undo()}}>
              撤销
            </Button>
          </Tooltip>
          <Tooltip title="重做">
            <Button onClick={()=>{this.drawer.redo()}}>
              重做
            </Button>
          </Tooltip>
          <Tooltip title="刷新">
            <Button onClick={()=>{this.drawer.clear()}}>
              刷新
            </Button>
          </Tooltip>
        </div> : null}
        {this.drawer ? this.drawer.renderPen() : null}
      </div>
    </div>
  }
}

export default App
